<!--
* @Author: zhangjing
* @Date: 2025-05-08 15:10:33
* @Description: 抢答=>
-->
<template>
	<div style="height: 500px; position: relative">
		<audio ref="dAudio" src="/mp3/ding.mp3"></audio>
		<audio ref="music" src="/mp3/djs.mp3" crossOrigin="anonymous" preload></audio>
		<div class="cardbox flex flex-v">
			<div class="quickanswer">
				<template v-if="isHasAnswer">
					<div>
						<img src="/impromptu/sahua.png" class="img" />
						<div class="box-sm">
							<div class="box-sm-inner" v-if="stuInfo && stuInfo.studName">
								<p class="box-sm-hd">恭喜抢答成功</p>
								<p class="name" @click="praiseStud(stuInfo)">{{ stuInfo.studName }}</p>
							</div>
							<div class="box-sm-inner flex flex-align-center flex-pack-center" v-else>
								<p class="box-sm-hd">很遗憾没有人抢答成功</p>
							</div>
							<a href="javascript:;" class="closeWin" @click="reback"
								><img src="closeWin.png" alt=""
							/></a>
						</div>
					</div>
				</template>
				<template v-else>
					<div>
						<img src="/impromptu/countdown.png" class="countdown-img" />
						<span class="countdown">{{ time }}</span>
					</div>
					<div class="tips">
						倒计时结束请按
						<b class="high"
							>“{{ !['RP554', 'RP555P'].includes(this.machineData.wareVersion) ? 'OK' : '语音' }}键”</b
						>
						进行抢答
					</div>
					<!-- <div
						class="save-btn"
						:class="[answering ? (time > 0 ? 'red loading' : 'red') : '']"
						@click="startQuickanswer"
					>
						{{ answering ? '结束抢答' : '开始抢答' }}
					</div> -->
				</template>
				<a href="javascript:;" v-if="!isHasAnswer" class="closeWin exit" @click="reback"
					><img src="closeWin.png" alt=""
				/></a>
			</div>
		</div>
	</div>
</template>

<script>
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex';
import { debounce, getBytesLength, base64ToBlob, dataURLtoBlob } from '@/utils/base.js';
import bus from '@/utils/eventBus';
var timer = null,
	stopTimer = null;
export default {
	name: 'quickanswer',
	components: {},
	props: {
		//接收器信息
		machineData: {
			type: Object,
			default: () => {},
		},
		//表单数据
		formData: {
			type: Object,
			default: () => {},
		},
	},
	data() {
		return {
			testType: '',
			signUserList: [],
			time: 3,
			isHasAnswer: false,
			answering: false,
			stuInfo: {},
			csId: '',
		};
	},
	computed: {
		...mapState({
			deviceType: (state) => state.websockStore.deviceType,
			studentList: (state) => state.websockStore.studentList,
			stopDeviceEventList: (state) => state.websockStore.stopDeviceEventList,
			isPro: (state) => state.isPro,
			ans_id: (state) => state.websockStore.ans_id,
		}),
		// wiredAnswer() {
		// 	return this.$store.getters.onEvent('wiredanswer');
		// },
		//是否是语音设备
		isVoiceDevice() {
			return ['RP554', 'RP555P'].includes(this.machineData.wareVersion);
		},
	},
	created() {
		bus.$on('quickanswerEvent', (message) => {
			this.$refs.dAudio.play();
			console.log(message); // Hello from Component A!
			this.isHasAnswer = true;
			this.answering = false;
			this.stuInfo = { ...message };
		});
	},
	methods: {
		...mapMutations(['WEBSOCKET_SEND', 'SET_ANS_ID']),
		//返回
		reback() {
			if (this.answering) {
				this.startQuickanswer();
			}
			this.answering = false;
			this.isHasAnswer = false;
			/* 如果是554 回显 */
			if (this.isVoiceDevice) {
				this.studentList.forEach((item) => {
					if (item.status == 1) {
						let msg = '   ' + item.studName;
						this.WEBSOCKET_SEND({
							fun: 'dtq_echo_set',
							uID: item.machineId - 0,
							msg: msg,
						});
					}
				});
				this.stuInfo = {};
			}
			this.$emit('reback');
		},
		startQuickanswer() {
			console.log('this.answering', this.answering);
			if (!this.answering) {
				this.time = 3;
				this.answering = true;
				this.stuInfo = {};
				this.$refs.music.play();
				timer = setInterval(() => {
					this.time--;
					if (this.time == 0) {
						clearInterval(timer);
					} else if (this.time == 1) {
						if (this.isVoiceDevice) {
							this.WEBSOCKET_SEND({
								fun: 'answer_start',
								uID: 0,
								type: 6,
							});
							this.studentList.forEach((item) => {
								if (item.status == 1) {
									let msg = '   ' + item.studName;
									let len = 16 - getBytesLength(msg);
									for (var i = 0; i < len; i++) {
										msg = msg + ' ';
									}
									msg = msg + '   请按语音键';
									this.WEBSOCKET_SEND({
										fun: 'dtq_echo_set',
										uID: item.machineId - 0,
										msg: msg,
									});
								}
							});
						} else {
							//发送指令
							let msg = {
								fun: 'answer_start',
								questions: [
									{
										type: 'hand',
										id: 1,
										range: '',
									},
								],
							};
							this.WEBSOCKET_SEND(msg);
						}

						// this.$ls.set('isQuickanswer', 1);
					}
				}, 1000);
				//6s 没有人抢到，需要自己关闭
				stopTimer = setTimeout(() => {
					clearTimeout(stopTimer);
					stopTimer = null;
					//提前结束
					this.answering = false;
					this.isHasAnswer = true;
					this.WEBSOCKET_SEND({
						fun: 'answer_stop',
					});
				}, 13 * 1000);
			} else {
				if (timer) {
					clearInterval(timer);
					timer = null;
				}
				if (stopTimer) {
					clearTimeout(stopTimer);
					stopTimer = null;
				}
				//提前结束
				this.answering = false;
				this.isHasAnswer = true;
				this.WEBSOCKET_SEND({
					fun: 'answer_stop',
				});
			}
		},
	},
	destroyed() {
		clearInterval(timer);
		clearTimeout(stopTimer);
		bus.$off('quickanswerEvent');
	},
};
</script>

<style lang="less" scoped>
.pannel {
	position: relative;
	width: 1162px;
	margin: 0 auto;
	height: 100%;
	@media screen and (max-width: 1366px) {
		width: 1024px;
	}
}
.cardbox {
	overflow: visible;
	height: 100%;
	position: relative;
	margin-top: 0;
	padding-top: 0;
}
.cardbox .closeWin {
	position: absolute;
	right: -20px;
	bottom: -16px;
	width: 46px;
	height: 46px;
	img {
		display: block;
		width: 100%;
		height: 100%;
	}
	// &.exit {
	// 	bottom: -80px;
	// 	right: -80px;
	// }
}
.quickanswer {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%;-50%);
	text-align: center;
	.countdown-img {
		width: 532px;
		height: 381px;
	}
	.countdown {
		font-size: 140px;
		font-weight: bold;
		color: @primary-color;
		position: absolute;
		top: 30px;
		left: 50%;
		line-height: 1;
		transform: translateX(-50%);
	}

	.box-sm {
		width: 501px;
		height: 266px;
		border: 1px solid @primary-color;
		border-radius: 10px;
		z-index: 6;
		background: rgb(243, 248, 255);
		.box-sm-inner {
			margin: 5px;
			height: calc(100% - 10px);
			border: 1px dashed @primary-color;
			border-radius: 10px;
			background: #fff;
		}
		.box-sm-hd {
			margin-top: 40px;
			color: #fa6401;
			font-size: 30px;
		}
		.name {
			color: @primary-color;
			font-size: 60px;
			cursor: pointer;
		}
	}
	.img {
		width: 1000px;
		position: absolute;
		top: -158%;
		left: 50%;
		-webkit-transform: translate(-50%);
		transform: translateX(-50%);
		z-index: -1;
	}
}
.tips {
	margin-top: 30px;
	text-align: center;
	font-size: 20px;
	color: #242424;
	font-weight: bold;
	z-index: 9;
	.high {
		color: @primary-color;
	}
}
</style>
